<template>
	<!-- 列表样式 -->
	<view class="p-2">
		<!-- 头像昵称 | 关注按钮 -->
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<!-- 头像 -->
				<image class="rounded-circle mr-2" :src="item.userpic" @click="openSpace"
				style="width: 60rpx;height: 60rpx;" lazy-load></image>
				<!-- 昵称发布时间 -->
				<view>
					<view class="font-small" style="line-height: 1.5;">{{item.username}}</view>
					<text class="font-small" style="color: #9D9589;line-height: 1.5;">{{item.usertime}}</text>
				</view>
			</view>
			<!-- 按钮 -->
			<view @click="follow" v-if="!item.isFlolow" >
			<view class="flex align-center justify-center rounded-2 font-small animated faster " 
			style="width: 90rpx;height: 50rpx; background-color: #DD524D;  color:#FFFFFF;" hover-class="jello" >
				关注
			</view>
		</view>
	   </view>
		<!-- 内容-->
		<view class="font-sm" style="margin: 10rpx 0; padding: 2rpx;" @click="openDetail">{{item.txt}}</view>			
		<!-- 图片 -->
		<view class="flex align-center justify-between flex-1" >
	     <image v-if="item.txt_pic" :src="item.txt_pic" @click="openDetail" style="height: 260rpx;width:100%; margin: 5rpx;
		 border-radius: 5rpx;" mode="aspectFill"></image>
		</view>
		
		<view style="margin:10rpx 10rpx;">
			<uni-tag text="#大龄" type="primary" :circle="true" size="small"  style="margin-right: 10rpx;"></uni-tag>
			<uni-tag text="#单身" type="error" :circle="true" size="small" style="margin-right: 10rpx;"></uni-tag>
			<uni-tag text="#高收入" type="success" :circle="true" size="small"></uni-tag>
		</view>
		
		<!-- 图标按钮 -->
		<view class="flex align-center">				
			<!-- <view class="flex align-center justify-center flex-1">
				<text class="iconfont icon-cai" style="margin-right: 20rpx;"></text>
				<text>1</text>
			</view> -->
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello" @click="openDetail" >
				<text class="iconfont icon-pinglun" style="margin-right: 20rpx;"></text>
				<text>{{item.comment_count}}</text>
			</view>
			
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello" @click="doSupport('support')">
				<text class="iconfont icon-dianzan" style="margin-right: 20rpx;" ></text>
				<text>{{item.support.support_count}}</text>
			</view>
			
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello" @click="doSupport('unsupport')">
				<text class="iconfont icon-iconfontzan " style="margin-right: 20rpx;" ></text>
				<text>{{item.support.unsupport_count}}</text>
			</view>
			
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello" @click="openDetail">
				<text class="iconfont icon-fenxiang" style="margin-right: 20rpx;"></text>
				<text>{{item.share_num}}</text>
			</view>
		</view>
	
	</view>	
	
</template>

<script>
	import uniTag from "@/components/uni_ui/uni-tag/uni-tag.vue"
	export default{
		components:{
			uniTag
		},
		props:{
			item:Object,
			index:Number
		},
		methods:{
			//打开个人空间
			openSpace(){
				console.log('打开个人空间')
			},
			//关注
			follow(){
				//通知父组件
				this.$emit('follow', this.index)
			},
			//进入详情页
			openDetail(){
				uni.navigateTo({
					url: '../../pages/detail/detail?detail='+JSON.stringify(this.item),
					
				});
			},
			//顶踩操作
			doSupport(type){
				console.log(type)
			}
		}
	}
</script>

<style>
	.bg-main{
		background-color: #FF4A6A;
	}
	
	.text-main{
		color: #FF4A6A;
	}
</style>
